<template>
	<div class="title-menu-filter">
		<ul class="title-menu-filter_left">
			<li v-for="item in filters" :key="item.name">
				<a :class="{ 'active': item.active }" @click="titleMenuFilter(item.type)">{{ item.name }}</a>
			</li>
		</ul>
		<div class="title-menu-filter_right">
			<a @click="refresh" title="刷新"><iv-icon type="ios-refresh"></iv-icon></a>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		menuIndex: {
			type: Number,
			default: -1
		},
		menuFilters: {
			type: Array,
			default: ()=>[
				{
					name: '最新',
					name: 'latest',
					active: true
				}
			]
		}
	},
	data() {
		return {
			filters: this.$cloneDeep(this.menuFilters),
			type: ''
		};
	},
	created() {
		for (let item of this.filters) {
			if (item.active) {
				this.type = item.type
				break
			}
		}
	},
	methods: {
		refresh() {
			this.$emit('refreshTitleList', {
				index: this.menuIndex,
				filterType: this.type
			})
		},
		titleMenuFilter(type) {
			this.type = type
			this.replaceActive(type)
			this.$emit('titleMenuFilter', {
				index: this.menuIndex,
				filterType: type
			})
		},
		replaceActive(type) {
			this.filters.map(item => {
				if (item.type === type) {
					item.active = true
				} else {
					item.active = false
				}
			});
		}
	}
};
</script>

<style lang="scss">
.title-menu-filter {
	display: flex;
	
	&_left {
		>li {
			float: left;
			margin: 0 6px;
			>a {
				padding: 6px 0;
				&:hover, &.active {
					color: $color-main-primary;
					border-bottom: 2px solid $color-main-primary;
				}
			}
		}
	}
	
	&_right {
		margin-left: 10px;
		>a {
			font-size: 20px;
			color: $color-gradually-gray-41;
			cursor: pointer;
			&:hover {
				color: $color-main-primary;
			}
			
			>i {
				margin-top: -3px;
			}
		}
	}
}
</style>